@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="/sitefiles/assets/css/xblms.min.css" rel="stylesheet" type="text/css" />
    <style>
        .ion-person:before,
        .ion-locked:before,
        .ion-image:before,
        .ion-ipad:before,
        .ion-chatbubble:before {
            width: 16px;
            font-size: 18px;
        }

        html,body {
            overflow: hidden;
        }
    </style>
}
<section class="container d-flex flex-column vh-100">
    <div class="row align-items-center justify-content-center g-0 h-lg-100">
        <div class="col-8 col-md-10">
            <div class="row bg-white" style="box-shadow:0 0 16px 2px rgba(102,0,255,0.25);">
                <div class="col-6 bg-primary bg-cover p-8" :style="{'background-image':'url('+(DEFAULT_LOGINBG_URL)+')'}">
                    <div class="d-flex flex-column text-white" :style="{height: ($(window).height()-300) + 'px'}">
                        <div class="mb-auto">
                            <p>
                                <img :src="DEFAULT_LOGO_URL" height="88" class="p-2 bg-white rounded-pill" />
                            </p>
                            <div>{{ versionName }}</div>
                            <p>
                                <div class="h2">{{ systemCodeName }}</div>
                            </p>
                        </div>
                        <div class="mt-auto"><span class="text-warning">{{ versionName }} v{{ version }}</span></div>
                    </div>
                </div>
                <div class="col-6 d-flex align-items-center justify-content-center p-8">
                    <div class="w-100">
                        <el-form v-on:submit.native.prevent ref="form" :model="form" label-width="0" status-icon>
                        <el-form-item>
                            <h2>用户登录</h2>
                        </el-form-item>
                        <el-form-item v-if="pageAlert">
                            <el-alert size="mini" :closable="false" :type="pageAlert.type" v-html="pageAlert.title" class="py-1"></el-alert>
                        </el-form-item>
                        <el-form-item prop="account" :rules="[{ required: true, message: '请输入用户名' }]">
                            <el-input ref="account" v-model="form.account" placeholder="请输入用户名" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码' }]">
                            <el-input v-model="form.password" show-password name="password" placeholder="请输入密码" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="!isUserCaptchaDisabled" prop="captchaValue" :rules="[{ required: true, message: '请输入验证码' }]">
                            <el-input v-model="form.captchaValue" placeholder="请输入验证码" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
                                <template slot="append">
                                    <a href="javascript:;" v-on:click="btnCaptchaClick">
                                        <img v-show="captchaUrl" style="display: none; height: 30px;" :src="captchaUrl">
                                    </a>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" plain v-on:click="btnSubmitClick" class="w-100 mt-3 py-3 fw-bolder">登 录<i class="bi bi-box-arrow-in-right ms-3"></i></el-button>
                        </el-form-item>
                    </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@section Scripts{
    <script src="/sitefiles/assets/lib/md5-2.10.0.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/login.js" type="text/javascript"></script>
}